<template>
  <div class="container">
    <div class="title">
      <img src="../assets/logo.png" />
    </div>
    <el-menu ref="elMenu" mode="horizontal" text-color="#fff" active-text-color="#ffd04b" :router="true" default-active="index">
      <el-menu-item index="index">
        首页
      </el-menu-item>
      <el-menu-item index="record">
        我的记录
      </el-menu-item>
      <el-menu-item index="guide">
        用户指南
      </el-menu-item>
      <el-menu-item index="about">
        关于
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  height: 60px;
  width: 100%;
  // background-color: #72635d;
  background-image: linear-gradient(90deg, #b59b91 5%, #72635d 100%) !important;
  justify-content: flex-start;
  align-items: center;

  .title {
    flex: 1;
    text-align: start;
    & img {
      height: 54px;
      width: auto;
    }
  }
  .el-menu--horizontal {
    border-bottom: 0;
    background-color: rgba($color: #000, $alpha: 0);
  }
  .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
  .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover {
    background-color: #61524d;
  }
}
</style>

<script>
export default {
  computed: {
    resetMenu () {
      return this.$store.state.resetMenu
    }
  },
  watch: {
    // 修复导航栏激活状态
    resetMenu: function () {
      this.$refs['elMenu'].activeIndex = 'guide'
    }
  },
  methods: {
    handleLogout () {
      this.$http.post('/usr/logout')
        .then((data) => {
          if (data && data.result) {
            this.$message.success('退出成功，即将前往登录页...')
            setTimeout(() => {
              this.$router.push('/login')
            }, 4000)
          }
        })
    }
  }
}
</script>
